<template>
<!-- 组件引用 商品滚动 传type  高佣专区highCommission, -->
<div class="cl1">
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="margin-right:10px;" v-for="(item,index) in listData" :key="index" @click="goProduct(item.id)">
          <div class="haoContent">
            <div class="img m-img">
              <img v-lazy="'/testImg/'+item.pic" alt="">
            </div>
              <p :class="type">￥{{item.price}}</p>
          </div>
        </div>
    </div>
    <!-- 如果需要分页器 -->
    <!-- <div class="swiper-pagination">123</div> -->
  </div>
</div>
</template>
<script>
import Swiper from "swiper"
export default {
  props:{
    type:{
      type:String,
      default:()=>{
        return ''
      }
    },
    listData:{
      type:Array,
    }
  },
  data () {
    return {
      bgColor:[
        'background:linear-gradient(180deg,rgba(75,191,185,1) 0%,rgba(161,227,168,1) 100%);',
        'background:linear-gradient(180deg,rgba(254,150,65,1) 0%,rgba(255,215,181,1) 100%);',
        'background:linear-gradient(180deg,rgba(115,153,254,1) 0%,rgba(153,213,255,1) 100%);'
      ],
      bgColor2:[
        'background:rgba(85,198,135,1);',
        'background:rgba(254,150,65,1);',
        'background:rgba(105,155,242,1);'
      ]
    }
  },
  updated () {
      new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop:1,
        autoplay: 5000,
        slidesPerView: "auto",
        centeredSlides:true,
        spaceBetween: 20,
        // 如果需要分页器
        // pagination: '.swiper-pagination',
      })
    }
  
}
</script>
<style lang='less' scoped>
.icon-tubiao-{
  font-size: 34px;
}
.haoContent {
  margin: 0;
  width: 146px;
  background-color: #fff;
  border-radius:10px;
  .img{
    .box(122px,122px);
    margin: auto;
  }
  p{
    font-size: 24px;
    color: #EF2B48;
    font-family: Dinmedium;
  }
  .highCommission{
    .family('Dinmedium');
    .font( #FC6217,26px)
  }

}
.cl1 {
  width: 710px;
  margin: 0 auto;
  overflow: hidden;
}
.swiper-container {
    margin-top: 20px;
    width: 710px;
    margin-bottom: 20px;
    overflow: visible!important;
}
// .swiper-container .swiper-wrapper .swiper-slide{ width: 390px; border-radius: 20px;}
// .swiper-container .swiper-wrapper .swiper-slide:nth-of-type(1) .haoContent{background:linear-gradient(180deg,rgba(75,191,185,1) 0%,rgba(161,227,168,1) 100%);}
//控制居中位置
.swiper-container .swiper-wrapper .swiper-slide{ width: 140px; border-radius: 10px;}
.swiper-container .swiper-wrapper .swiper-slide .haoContent {margin-top: 20px;}
.swiper-container .swiper-wrapper .swiper-slide .haoContent img{margin-top: 20px; width: 122px; height: 122px; border-radius: 10px;}
// .swiper-container .swiper-wrapper .swiper-slide img{width: 378px; height: 512px; border-radius: 20px;}
//控制上一个元素的样式
// .swiper-container .swiper-wrapper .swiper-slide-prev img{ height: 452px!important;}
.swiper-container .swiper-wrapper .swiper-slide-prev .haoContent {margin-top: 20px;}
// .swiper-container .swiper-wrapper .swiper-slide-prev .haoContent img{ height: 122px!important;}
//控制下一个元素的样式

// .swiper-container .swiper-wrapper .swiper-slide-next img{ height: 452px!important;}
// .swiper-container .swiper-wrapper .swiper-slide-next .haoContent img{ height: 122px!important;}
.swiper-container .swiper-wrapper .swiper-slide-next .haoContent {margin-top: 20px;}
//控制右边间距
.swiper-container .swiper-wrapper .swiper-slide-active .haoContent{ padding-top: 0px; margin-top: 0;}
.swiper-container .swiper-wrapper .swiper-slide-active .haoContent img{ width: 140px; height: 140px;}

.swiper-pagination{
    bottom: -30px!important;
}
.swiper-pagination .swiper-pagination-bullet{width: 12px; height: 12px; background: #ff1e1e;}
.swiper-pagination .swiper-pagination-bullet-active{width: 21px; height: 12px; background: #e75230; border-radius: 6px;}
</style>